<template>
  <a-drawer
    :title="title"
    width="870px"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @close="handleCancel"
    cancelText="关闭">
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button @click="handleCancel"style='margin-right: 10px'>取消</a-button>
      <a-button @click="handleOk"  type="primary">确认</a-button>
    </div>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="22">
          <a-col :span="22">
            <div style='padding: 8px 24px;margin-bottom:12px;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8;box-sizing: border-box' >调出方</div>
          </a-col>
          <a-col :span="24">
            <div class='flex wrap' style='padding: 0 32px'>
              <div class='items' style='width: 33%'>费用预算编码: {{model.budgetCode}}</div>
              <div class='items' style='width: 33%'>费用预算类型: {{model.budgetTypeStr}}</div>
              <div class='items' style='width: 33%'>年份: {{model.budgetYear}}</div>
              <div class='items' style='width: 33%'>季度: {{model.budgetQuarter}}</div>
              <div class='items' style='width: 33%'>月度: {{model.budgetMonth}}</div>
              <div class='items' style='width: 33%'>对象: {{model.budgetType==1?model.budgetOrgName:model.custName}}</div>
              <div class='items' style='width: 33%'>预算科目: {{model.budgetSubjectsName}}</div>
              <div class='items' style='width: 33%'>商品层级: {{model.productLevelName}}</div>
              <div class='items' style='width: 33%'>商品: {{model.productName}}</div>
              <div class='items' style='width: 33%'>期初金额: {{model.initAmount}}</div>
              <div class='items' style='width: 33%'>当前余额: {{model.amount}}</div>
              <div class='items' style='width: 33%'>备注: {{model.remarks}}</div>
              <div class='items' style='width: 50%'>调整金额:
                <a-input-number :min="0" v-model='model.changeAmount'  :disabled="detailPage" style='width: 200px;margin-left: 5px' @change='numberChange'/>
              </div>
              <div class='items' style='width: 50%'>调整后余额:
                <a-input-number  v-model='afterAmount' :disabled="true" style='width: 200px;margin-left: 5px'/>
              </div>

              <div class='items' style='width: 60%'> <div style='width: 65px'>备注:</div>
                <a-input placeholder="请输入备注" v-model='remarks' :disabled="detailPage" style='width: 250px'/>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style='padding: 8px 24px;margin-bottom:12px;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8;border-top: 1px solid #e8e8e8;box-sizing: border-box' >
              调入方:
              <a-button type="primary" @click='handlebuget' style='margin-left: 16px'>选择调入预算</a-button></div>
          </a-col>
          <a-col :span="24">
            <div v-if="model1.id" class='flex wrap' style='padding: 0 36px'>
              <div class='items' style='width: 33%'>费用预算编码:{{model1.budgetCode}}</div>
              <div class='items' style='width: 33%'>费用预算类型:{{model1.budgetTypeStr}}</div>
              <div class='items' style='width: 33%'>年份:{{model1.budgetYear}}</div>
              <div class='items' style='width: 33%'>季度:{{model1.budgetQuarter}}</div>
              <div class='items' style='width: 33%'>月度:{{model1.budgetMonth}}</div>
              <div class='items' style='width: 33%'>对象:{{model1.budgetType==1?model1.budgetOrgName:model1.custName}}</div>
              <div class='items' style='width: 33%'>预算科目:{{model1.budgetSubjectsName}}</div>
              <div class='items' style='width: 33%'>商品层级:{{model1.productLevelName}}</div>
              <div class='items' style='width: 33%'>商品:{{model1.productName}}</div>
              <div class='items' style='width: 33%'>期初金额:{{model1.initAmount}}</div>
              <div class='items' style='width: 33%'>当前余额:{{model1.amount}}</div>
              <div class='items' style='width: 33%'>备注:{{model1.remarks}}</div>
              <div class='items' style='width: 33%'>调整后余额:{{afterAmount1}}</div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <select-budget-info ref='selectBudgetInfo' @ok='getCallIn'></select-budget-info>
  </a-drawer>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import UploadImage from '@comp/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JSelectSubjects from '@/components/cn-select-popup/JSelectSubjects'
import selectBudgetInfo from '../../tmrComponents/selectBudgetInfo'
export default {
  name: 'costChange',
  data() {
    return {
      type:1,
      detailPage:false,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      subOp:[],
      model1:{},

      url:{
        detail: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/getInfo',
      },
      addOrUpdateUrl: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFee/expenseBudgetChange',
      afterAmount:0,
      afterAmount1:0,
      remarks:''
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JImageUpload,JSelectSubjects,selectBudgetInfo },
  created() {

  },
  methods: {
    handlebuget(){
      this.$refs.selectBudgetInfo.queryParam['id']=this.model.id
      this.$refs.selectBudgetInfo.edit()
      this.$refs.selectBudgetInfo.disableSubmit = false
    },
    add() {
      this.edit({})
    },
    edit(record, status) {
      this.form.resetFields()
      this.remarks=''
      this.model1={}
      this.model={}
      this.afterAmount=0
      this.afterAmount1=0
      getAction(this.url.detail,{id:record.id}).then(res=>{
        if(res.success){
          this.model = Object.assign({}, res.result)
          this.afterAmount= res.result.amount
          this.$nextTick(() => {
            // this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
          })
        }
      })
      this.visible = true
    },
    getCallIn(id){
      getAction(this.url.detail,{id:id[0]}).then(res=>{
        if(res.success){
          this.model1 = Object.assign({}, res.result)
          this.afterAmount1= res.result.amount+this.model.changeAmount
        }
      })
    },

    numberChange(e){
        this.afterAmount=this.model.amount-e
        this.afterAmount1=this.model1.amount+e
    },

    close(){
      this.visible = false
      this.$emit('close')
    },
    handleCancel() {
     this.close()
    },
    handleOk() {
          if(!this.model.changeAmount){
            this.$message.error('请输入调整值！')
            return
          }
          const that = this
          this.confirmLoading = true
          let formData ={
            id:this.model.id,
            transferInId:this.model1.id,
            change:'1',
            remarks:this.remarks,
            changeAmount:this.model.changeAmount
          }
          postAction(this.addOrUpdateUrl, formData).then(res => {
            if (!res.success) {
              that.$message.error(res.message)
              that.confirmLoading = false
              return
            }
            that.confirmLoading = false
            that.$emit('ok')
            that.handleCancel()
            that.$message.success(res.message)
          })

    },
    changeSelect(options,name,event){
      name=name.split("Code");
      if(name.length>1){
        name=name[0]+'Name'
        let item=options.find(item=>item.value==event)
        this.model[name]=item.name
      }
    },
    selectRole(row,name,key){
      console.log(row,name,key)
      let value=row.map(v=>v[key])
      console.log(value)
      name=name.split("Code");
      if(name.length>=1){
        name=name[0]+'Name'+(name[1]?name[1]:'')
        this.model[name]=value+''
      }
    },

  }
}
</script>

<style scoped>
.gonghuoxinxi {
  width: 100%;
  border-bottom: 1px dashed black;
  margin: 10px 0;
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
}
/deep/ .ant-drawer-body{
  padding: 0px;
  box-sizing: border-box;
}
.flex{
  display: flex;
  box-sizing: border-box;

}
.wrap{
  flex-wrap: wrap;
  box-sizing: border-box;
}
.items{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 24px;
}
.items-text{
  width: 60px;
  margin-right: 10px;
  text-align: right;
}



</style>
